<template>
	<view class='ptDetail'>
		<view class="header dFlex jBetween_aCenter" :style="{
			'height':headerHeight+'px',
			'padding-top':headerTop+'px'
		}">
			<view class="backIcon imgPublic" @tap='back()'>
				<image src="../static/images/back.png" mode="widthFix"></image>
			</view>
			<view class='header_title'>洗匣士拼好团</view>
			<view class="backIcon"></view>
		</view>
		<view class="position dFlex jStart_aCenter">
			<view class="weizhi imgPublic">
				<image src='https://wx.gdxixiashi.com/public/images/home/weizhi.png' mode="widthFix"></image>
			</view>
			<text>{{address}}</text>
		</view>
		<view class="container" :style="{
			'height':contentHeight + 'px'
		}">
			<view class="ptOne dFlex jStart_aStart" @tap='lookDetail(datas.productId)'>
				<view class="ptImg imgPublic">
					<image :src="datas.list_img" mode="widthFix"></image>
				</view>
				<view class="ptInfo">
					<view class='shopName'>{{datas.product_name}}</view>
					<view class="shopPrice dFlex jBetween_aCenter">
						<view class="price">￥<text>{{datas.sell_price}}元/{{datas.specs_name}}</text></view>
					</view>
				</view>
			</view>
			<view class="toast">
				团购拼单，还差<text>{{datas.num2}}</text>人拼成 
			</view>
			<view class="toast">
				拼单倒计时<uni-countdown style="display:inline-block;width: max-content;" color='#5c9ff8' splitorColor='#5c9ff8' :show-day="false" :hour="datas.hour" :minute="datas.min" :second="datas.sec"></uni-countdown>后结束
			</view>
			<view class="userList">
				<view class='txOne' v-for="(item,index) in datas.members" :key='index'>
					<view class="userOneTx imgPublic" >
						<image :src="item.image_head"></image>
					</view>
					<!-- 是发起人显示 不是发起人不显示 -->
					<view class="sendIcon" v-if='item.is_first == "1"'>发</view>
				</view>
				<!-- v-if="isCurrentUser"  -->
				<button open-type="share" class="invite">邀 请 拼 单</button>
				<view class="invite" @click="specFlag = true">参 与 拼 团</view>
			</view>
			<view class='tips'>
				注：拼团按台数计算，{{datas.group_num}}台自动成团。
			</view>
		</view>
		<view class="kefu imgPublic" @click='backHome'>
			<image src="/static/images/menu1_1.png" mode="widthFix"></image>
		</view>
		<!-- 规格弹窗 -->
		<view class="zz dFlex flexDirection jEnd_aCenter" v-if="specFlag">
			<view class="spec">
				<view class="titles dFlex jBetween_aCenter">
					<view class="closeIcon imgPublic"></view>
					<view class="tit">商品规格</view>
					<view class="closeIcon imgPublic" @tap.stop='specFlag = false'>
						<image src="../static/images/closeIcon.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="shopInfo dFlex jStart_aStart">
					<view class="shopImg imgPublic">
						<image :src="datas.list_img" mode="widthFix"></image>
					</view>
					<view class="other">
						<view class="shopName">{{datas.product_name}}</view>
						<view class="price dFlex jStart_aCenter" v-if="sel_spec.specsId">
							<text>￥{{sel_spec.sell_price}}</text>
							<!-- <text style="font-size: 12px;display: inline-block;margin-left: 12px;">奖励{{sel_spec.point}}积分</text> -->
						</view>
						<view class="selSpec">{{sel_spec.specsId?sel_spec.specs_name:'请选择规格'}}</view>
					</view>
				</view>
				<view class="specList">
					<view class="part">
						<view class="partList dFlex jStart_aStart fWap">
							<view :class="['specOne',sel_spec.specsId == item.specsId?'active':'']" v-for="(item,index) in specs" @tap.stop='selSpec2(index)' :key='index'>{{item.specs_name}}</view>
						</view>
					</view>
				</view>
				<view class="sureBtn" @tap.stop='joinPT'>确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerTop: '',
				headerHeight: '',
				contentHeight: '',
				productId:'',
				orderId:'',
				address:'',
				datas:{},
				isCurrentUser:false,
				
				// 商品规格
				specFlag:false,
				specs:{},
				sel_spec:{},	//选中的规划
			};
		},
		onLoad(e) {
			this.productId = e.productId ? e.productId : "";
			this.orderId = e.orderId ? e.orderId : "";
			if(e.isShare){
				uni.setStorageSync('GroupOrderId',{
					orderId:e.orderId,
					productId:e.productId,
				});
			}
			this.headerTop = uni.getMenuButtonBoundingClientRect().top;
			this.headerHeight = uni.getMenuButtonBoundingClientRect().height;
			uni.getLocation({
				type: 'gcj02', //设置type为gcj02
				isHighAccuracy: true,
				success: (locate) => {
					this.lat = locate.latitude;
					this.lng = locate.longitude;
					uni.request({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=location',//腾讯官方逆解析接口，可直接复制
						data: {
							location: locate.latitude + ',' + locate.longitude,
							'key': getApp().globalData.mapKey,//自己申请的Key
						},
						method: "GET",
						success:(res)=>{
							res = res.data;
							if(res.status == 0){
								getApp().globalData.showAddress = res.result.formatted_addresses.standard_address;
								this.address = getApp().globalData.showAddress;
							}else{
								uni.showToast({
									title:'地理位置解析失败',
									icon:"none"
								})
							}
						},
						fail: res=> {
							console.log(res.errMsg,'解析失败返回的错误信息');
						}
					})
				},
				fail:(err)=>{
					console.log(err)
				},
				complete: () => {
					this.initData();
				}
			})
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您身边的洗护管家',
				path:'/home/ptDetail?isShare=1&spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):'')+'&productId='+this.productId+'&orderId='+this.orderId,
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您身边的洗护管家',
				path:'/home/ptDetail?isShare=1&spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):'')+'&productId='+this.productId+'&orderId='+this.orderId,
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShow() {
			uni.createSelectorQuery().select('.position').boundingClientRect(data => {
				this.contentHeight = uni.getSystemInfoSync().windowHeight - this.headerTop - this.headerHeight -
					data.height;
			}).exec()
		},
		methods:{
			// 选择商品规格
			selSpec2(idx){
				this.sel_spec = this.specs[idx];
			},
			backHome(){
				uni.switchTab({
					url:'/pages/home'
				})
			},
			// 下一步
			joinPT(){
				if(!this.sel_spec.specsId){
					uni.showToast({
						title:"请选择规格",
						icon:"none"
					})
					return
				}
				if(uni.getStorageSync('userId')){
					this.specFlag = false;
					uni.navigateTo({
						url:'/kind/beforeOrder?status=1&specsId='+this.sel_spec.specsId+'&num=1&isGroup=2'
					})
				}else{
					uni.showToast({
						title:'请登录后操作',
						icon:"none"
					})
					setTimeout(()=>{
						// #ifdef MP-WEIXIN
						uni.redirectTo({
							url:'/person/login'
						})
						// #endif
						// #ifdef APP-PLUS
						uni.redirectTo({
							url:'/person/mobileLogin'
						})
						// #endif
					},1650)
				}
			},
			initData(){
				this.tool.getData('Group/groupInfo',{
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):'',
					orderId:this.orderId,
				}).then(res=>{
					if(res){
						var chazhi = res.stop_time - new Date().getTime();
						res.day = parseInt(chazhi / 1000 / 3600 / 24);
						res.hour = parseInt(chazhi / 1000 / 3600 % 24);
						res.min = parseInt(chazhi / 1000 / 60 % 60 );
						res.sec = Math.round(chazhi / 1000 % 60);
						if(uni.getStorageSync('userId')){
							let isFirst = res.members && res.members.length ? res.members.find((user)=>{return user.is_first == 1}) : {};
							if(isFirst.memberId == uni.getStorageSync('userId')){
								this.isCurrentUser = true;
							}else{
								this.isCurrentUser = false;
							}
						}
						this.datas = res;
						this.initSpec();
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 商品规格
			initSpec(){
				this.tool.getData('Product/goodsInfo',{
					productId:this.productId,
				}).then(res=>{
					if(res){
						this.specs = res.specs;
						this.sel_spec = res.specs.find((item)=>{return item.specs_name == res.specs_name});
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 商品详情
			lookDetail(productId){
				uni.navigateTo({
					url:"/kind/shopDetail?productId="+this.datas.productId,
				})
			},
		}
	}
</script>

<style lang="scss">
	.kefu{
		width: 50px;
		height: 50px;
		position: fixed;
		right: 10px;
		bottom: 90px;
		border:1px solid rgba(0,0,0,0.2);
		padding:10px;
		box-sizing: border-box;
		border-radius: 50%;
	}
	.container {
		width: 100%;
		background: white;
		padding: 12px;
		box-sizing: border-box;
		.userList{
			width:100%;
			.invite{
				display: block;
				width: 150px;
				padding: 6px 0;
				text-align: center;
				color: white;
				border-radius: 4px;
				background: #5c9ff8;
				margin: 12px auto;
			}
			.txOne{
				position: relative;
				display:inline-block;
				margin-right: 12px;
				margin-bottom: 12px;
				width:calc((100% - 12px * 4 - 10px) / 5);
				.sendIcon{
					width:20px;
					height:20px;
					border-radius: 50%;
					background: #5c9ff8;
					color:white;
					font-size:10px;
					line-height: 20px;
					border-radius: 50%;
					text-align: center;
					position: absolute;
					right:0;
					bottom:0;
				}
			}
			.userOneTx{
				width:56.59px;
				height:56.59px;
				padding:2px;
				box-sizing: border-box;
				image{
					width: 100%;
					height:100%;
					border:1px solid rgba(0,0,0,0.1);
					border-radius: 50%;
				}
			}
			.txOne:nth-child(5n + 5){
				margin-right: 0;
			}
		}
		.tips{
			width: 90%;
			margin: 20px auto 12px;
			font-size: 16px;
			text-align:center;
		}
		.toast {
			width: 90%;
			margin: 20px auto 12px;
			font-size: 16px;
			text-align:center;
			text {
				color: #5c9ff8;
				display: inline-block;
				padding: 0 2px;
			}
		}

		.ptOne {
			.ptInfo {
				width: calc(100% - 80px);

				.btns {
					flex: 1;

					.btn {
						width: auto;
						background: #5c9ff8;
						color: white;
						padding: 3px 8px;
						border-radius: 5px;
						font-size: 12px;
						margin-left: 5px;
					}
				}

				.shopPrice {
					.price {
						color: #5c9ff8;
						font-size: 12px;

						text {
							font-size: 15px;
						}
					}

					width:100%;
					margin-top:20px;
				}

				.shopName {
					width: 100%;
					word-break: break-all;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			.ptImg {
				width: 80px;
				height: 80px;
				overflow: hidden;
				margin-right: 10px;

				image {
					border-radius: 4px;
				}
			}

			width:100%;
			background: white;
			box-sizing: border-box;
			margin-bottom:12px;
		}
	}

	.position {
		width: 100%;
		padding: 10px 12px;
		box-sizing: border-box;
		color: white;
		font-size: 12px;

		.weizhi {
			width: 20px;
			height: 20px;
			margin-right: 10px;
		}
	}

	.header {
		width: calc(100% - 24px);
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 5px;
		background: #5c9ff8;

		.backIcon {
			width: 20px;
			height: 20px;
			padding: 2px;
			box-sizing: border-box;
			border: 1px solid white;
			border-radius: 50%;
		}

		.header_title {
			font-size: 16px;
			color: white;
			// background-image: linear-gradient(to bottom,#8abff1,#ffffff);
			// background-clip: text;
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			font-weight: bold;
		}
	}
	.zz{
		.spec{
			width:100%;
			overflow: auto;
			max-height: 80%;
			padding: 0 24rpx 12px;
			box-sizing: border-box;
			background: white;
			.sureBtn {
				width: 100%;
				padding: 12px 0;
				border-radius: 40px;
				color: white;
				text-align: center;
				background: #1664FF;
			}
			.specList {
				margin-bottom: 24px;
				.part {
					width: 100%;
					.partList {
						width: 100%;
						.specOne {
							width: auto;
							text-align: center;
							padding: 6px 12px;
							box-sizing: border-box;
							background: #F6F6F6;
							border-radius: 8px;
							margin-right: 12px;
							margin-bottom: 10px;
							font-weight: 400;
							border: 1px solid #F6F6F6;
						}
						.active {
							background: #1664FF;
							color: #FFFFFF;
							border: 1px solid #1664FF;
						}
					}
				}
			}
			.shopInfo {
				width: 100%;
				margin-bottom: 12px;
				.shopImg {
					width: 66px;
					height: 66px;
					overflow: hidden;
					background: white;
					margin-right: 12px;
					border-radius: 8px;
				}
				.other {
					flex: 1;
					.price {
						font-size: 16px;
						color: #FC4424;
						margin: 6px 0;
						background: none;
						padding: 0;
					}
					/* .specPrice{
						font-size: 16px;
					} */
					.selSpec {
						font-size: 12px;
						color: #999999;
						margin: 6px 0 6px;
					}
					.shopName {
						font-size: 18px;
						width: 90%;
					}
				}
			}
			.titles{
				width:100%;
				padding: 15px 3.2%;
				box-sizing: border-box;
				color: #000000;
				font-size: 15px;
				.closeIcon{
					width: 14px;
					height: 14px;
				}
			}
		}
	}
	page {
		background: #5c9ff8;
	}
</style>